<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <svg id="svg"></svg>
</body>
</html>
<script src="http://d3js.org/d3.v6.min.js"></script>
<script>
 let width = 600,
    height = 600;
  let svg = d3.select('#svg').attr('width', width).attr('height', height);

  let projection = d3.geoMercator()
    .center([105,38])
    .scale(500)
    .translate([width/2,height/2])


  // 地图路径生成器
  let path = d3.geoPath().projection(projection)

  let color = d3.scaleOrdinal().domain(d3.range(0,40)).range(d3.schemeSet1);
  console.log(d3.range(0,40),d3.schemeSet1)
  console.log(color(3))

  // d3.csv  d3.xml  d3.txt
  d3.json('./china.geojson').then(data=>{
    console.log(data)
    let g = svg.append('g');
    g.selectAll('path').data(data.features)
    .enter()
    .append('path')
    .classed('qqqq',true)
    .attr('fill',function(d,i){
      return color(i)
    })
    .attr('d',function(d,i){
      return path(d,i)
    })
  })
  d3.xml('./southchinasea.svg').then(xml=>{
    svg.html(function(d){
      return d3.select(this).html() + xml.getElementById('southchinasea').outerHTML;
    })
    d3.select('#southchinasea')
    .attr('transform','translate(500,400)scale(0.5)')
    .attr('fill','red')
    .attr('stroke','#333')
  })
</script>